<!doctype html>
<html lang="en">
<head>
    <title>GET VIDEO</title>
    <meta charset="utf-8">

	 <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
	<style type="text/css">
		
		
		    body{
		      width:100%;
		      height:100%;
		      background:url('../image/Starry.jpg');
		      background-repeat: no-repeat;
		      background-size:100% 100%;
		      background-attachment:fixed;
		    }
		
	</style>
	 
</head>
<body>
	<!-- 布局 -->
<div class="layui-container" align="center">  	
<!-- 第一行开始 -->
<div class="layui-row">
	<div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
		
<video id="video" width="500px" height="500px" autoplay="autoplay"></video>
    </div>
	
    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
<canvas id="canvas" width="500px" height="500px"></canvas>
    </div>
	</div>
<!-- 第一行结束		 -->

<!-- 第二行开始 -->
	<div class="layui-row" align="center">
		<div class="layui-col-xs6 layui-col-sm6 layui-col-md6 " align="right">
<input type="button" class="layui-btn layui-btn-normal" title="开启摄像头" value="开启摄像头" onclick="getMedia()" />
        </div>
	    <div class="layui-col-xs6 layui-col-sm6 layui-col-md6 " align="left">
<button id="snap" class="layui-btn layui-btn-normal" onclick="takePhoto()">人脸识别</button>
        </div>
   </div>
<!-- 第二行结束 -->

<div>






<script>
    //获得video摄像头区域
    let video = document.getElementById("video");
    function getMedia() {
        let constraints = {
            video: {width: 500, height: 500},
             audio: true
        };
        /*
        这里介绍新的方法:H5新媒体接口 navigator.mediaDevices.getUserMedia()
        这个方法会提示用户是否允许媒体输入,(媒体输入主要包括相机,视频采集设备,屏幕共享服务,麦克风,A/D转换器等)
        返回的是一个Promise对象。
        如果用户同意使用权限,则会将 MediaStream对象作为resolve()的参数传给then()
        如果用户拒绝使用权限,或者请求的媒体资源不可用,则会将 PermissionDeniedError作为reject()的参数传给catch()
        */
        let promise = navigator.mediaDevices.getUserMedia(constraints);
        promise.then(function (MediaStream) {
            video.srcObject = MediaStream;
            video.play();
        }).catch(function (PermissionDeniedError) {
            console.log(PermissionDeniedError);
        })
    }
	
    function takePhoto() {
        //获得Canvas对象
        let canvas = document.getElementById("canvas");
        let ctx = canvas.getContext('2d');
        ctx.drawImage(video, 0, 0, 500, 500);
		//得到图片的base64格式
		var base64 = canvas.toDataURL();
		        
		// location.href="FaceServlet?data="+base64;
		console.log(base64)
		//创建json数据格式
		        
		 //异步传递到servlet
		        
		        
		 $.ajax({
		  url:"FaceServlet",    //请求的url地址
		  dataType:"json",   //返回格式为json
		  async:true,//请求是否异步，默认为异步，这也是ajax重要特性
		  // contentType:"application/json",
		  data: {"imagebast64": base64} , //参数值,为key:value形式
		  type: "POST", //请求方式
		  success:function(data){
		     console.log(data);
		        	}	      		
		    })
		
    }
	

	
	
</script>
</body>
</html>


